<template>
  <div class="public-box right-mid">
    <p class="public-tit">{{this.title}}（TOP5）</p>
    <div style="width: 100%;margin-top: 60px">
      <!--<ul ref="tab" class="tab-ul">-->
      <!--<li v-for="(item,index) in items" :key="index" :class="{'hov':num===index}" @click="clickTab(index)">-->
      <!--{{ item.title }}（TOP5）-->
      <!--</li>-->
      <!--</ul>-->
      <el-scrollbar class="left-scrollbar" style="height: 100%">
        <div v-for="(item,index) in baseItems" :key="index" class="each">
          <div class="flex-space-between">
            <span class="city-name font-28"> {{ item.title }}</span>
            <strong class="font-28" :class="[num?'yellow-text':'green-text']">{{ item.count }}</strong>
          </div>
          <el-progress
            :class="[num?'yellow-progress':'green-progress']"
            :percentage="item.percent"
            :show-text="false"
          />
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
  import { stt } from '@/models/screen'

  export default {
    name: 'RightMid',
    data() {
      return {
        items: [],
        num: 1,
        baseItems: [],
        title:''
      }
    },
    created() {
      this.init()
    },
    methods: {
      async init() {
        const { data } = await stt.getScreenStatisticsBaseConstruction()
        this.title = data[1].title
        console.log(data)
        this.items = data
        this.baseItems = data[1].dataList
      },
      clickTab(index) {
        this.num = index
        this.baseItems = this.items[index].dataList
      }
    }
  }
</script>

<style scoped lang="less">
  .right-mid {
    width: 1076px;
    height: 650px;
    padding-right: 50px;
    box-sizing: border-box;
    background: url("../../../assets/images/index/right_mid.png") no-repeat;
    background-size: 100% 100%;
    margin: 49px 0 0px;
  }

  .tab-ul {
    display: flex;
    margin: 60px 0 74px;

    li {
      font-size: 30px;
      color: #D1E0FF;
      cursor: pointer;

      &:first-child {
        margin-right: 75px;

        &.hov {
          position: relative;

          &:after {
            position: absolute;
            content: '';
            bottom: -32px;
            left: 0;
            width: 456px;
            height: 27px;
            background: url("../../../assets/images/index/hov.png") no-repeat;
          }
        }
      }

      &.hov {
        position: relative;

        &:after {
          position: absolute;
          content: '';
          bottom: -32px;
          left: 0;
          width: 456px;
          height: 27px;
          background: url("../../../assets/images/index/hov_sm.png") no-repeat;
        }
      }
    }
  }

  .each {
    margin-bottom: 30px;

    .city-name {
      margin-bottom: 20px;
      color: rgba(255, 255, 255, .8);
    }

    strong {
      font-weight: bold;
    }

    .green-text {
      color: #81D8AE;
    }

    .yellow-text {
      color: #F99C45;
    }
  }

</style>
